<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态查询</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/bootstraptable/bootstrap-table.css" rel="stylesheet">
</head>
<body>
<div style="color: #0e9aef;">您正在做的业务是：库存管理--动态库存管理--动态库存查询</div>
<div style="margin-top: 10px;">符合条件的产品总数：<span id="eligible_total_span"></span>例</div>
当前库存总数：<span id="total"></span>件
<div class="container">
    <form class="form-horizontal" id="dynamic_queries_form">
        <div class="form-group">
            <div class="col-md-5">
                <label class="control-label col-md-4">请选择产品I级分类</label>
                <div class="col-md-8">
                    <select class="form-control" id="search_firstKindId" name="search_firstKindId">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="col-md-5">
                <label class="control-label col-md-4">请选择产品II级分类</label>
                <div class="col-md-8">
                    <select class="form-control" name="search_secondKindId" id="search_secondKindId">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-5">
                <label class="control-label col-md-4">请选择产品III级分类</label>
                <div class="col-md-8">
                    <select class="form-control" name="search_thirdKindId" id="search_thirdKindId">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="col-md-5">
                <label class="control-label col-md-4">请输入产品名称</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" name="search_name" id="search_name">
                </div>
            </div>
            <div class="col-md-2">
                <div class="col-md-offset-1">
                    <input type="button" value="查询" class="btn btn-default" id="queries_btn" />
                </div>
            </div>
        </div>
    </form>
</div>

<table id="dynamic_queries_table"></table>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<script src="/js/currentTime.js"></script>

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    $(function (){

        setTimeout(function (){
            let num=$("#dynamic_queries_table").bootstrapTable("getOptions").totalRows
            $("#eligible_total_span").html(num)
        },500)

        firstKind()
        secondKind()
        thirdKind()

        $("#dynamic_queries_table").bootstrapTable({
            method: "post",
            contentType: "application/x-www-form-urlencoded",
            url:"/storage/cell/dynamicQueriesByStorageCell",
            // 数据行交替样式
            striped: true,
            // 是否是服务器端分页：server表示服务器端，client表示前端分页
            sidePagination: 'server',
            //初始化加载第一页
            pageNumber: 1,
            //是否分页
            pagination: true,
            // 单页记录数，页大小
            pageSize: 5,
            // 分页列表
            pageList: [8, 10, 20],
            // 请求参数
            queryParams: function (params) {
                let obj = {
                    // params.limit获取组件中的页大小
                    // params.offset获取请求数据的起始索引
                    pageSize: params.limit,
                    pageNo: (params.offset / params.limit) + 1,

                    // // 查询表单的数据
                    search_firstKindId :$("#dynamic_queries_form #search_firstKindId").val(),
                    search_secondKindId :$("#dynamic_queries_form #search_secondKindId").val(),
                    search_thirdKindId :$("#dynamic_queries_form #search_thirdKindId").val(),
                    search_name :$("#dynamic_queries_form #search_name").val(),
                }
                return obj;
            },
            // 表格列标题
            columns: [{
                title: "I级产品分类",
                field: "firstKindName",
            }, {
                title: "II级产品分类",
                field: "secondKindName",
            }, {
                title: "III级产品分类",
                field: "thirdKindName",
            },{
                title: "产品编号",
                field: "productId",
            }, {
                title: "产品名称",
                field: "productName"
            }, {
                title: "库存数量",
                field: "amount",
            },{
                title: "安全库存上限",
                field: "maxAmount"
            },{
                title: "安全库存下限",
                field: "minAmount"
            }]
        })

        $("#dynamic_queries_form #queries_btn").click(function (){
            $("#dynamic_queries_table").bootstrapTable("refresh")
        })

       setTimeout(function (){
           //当前库存总数
           let totalNums=$("#dynamic_queries_table tr").find("td:eq(5)")
           let num=0;
           for(let i=0;i<totalNums.length;i++){
               num+=parseInt($(totalNums[i]).html())
           }
           $("#total").html(num)
       },500)

    })


    function firstKind() {
        $.post("/design/file/select", {"kid": "1"}, function (res) {
            $("#dynamic_queries_form #search_firstKindId option:gt(0)").remove()
            for (let i = 0; i < res.length; i++) {
                let obj = res[i]
                let $op = $("<option>" + obj.kindName + "</option>")
                $op.val(obj.kindId)
                $("#dynamic_queries_form #search_firstKindId").append($op)
            }
        })
    }

    function secondKind() {
        $.post("/design/file/select", {"kid": "2"}, function (res) {
            $("#dynamic_queries_form #search_secondKindId option:gt(0)").remove()
            for (let i = 0; i < res.length; i++) {
                let obj = res[i]
                let $op = $("<option>" + obj.kindName + "</option>")
                $op.val(obj.kindId)
                $("#dynamic_queries_form #search_secondKindId").append($op)
            }
        })
    }

    function thirdKind() {
        $.post("/design/file/select", {"kid": "3"}, function (res) {
            $("#dynamic_queries_form #search_thirdKindId option:gt(0)").remove()
            for (let i = 0; i < res.length; i++) {
                let obj = res[i]
                let $op = $("<option>" + obj.kindName + "</option>")
                $op.val(obj.kindId)
                $("#dynamic_queries_form #search_thirdKindId").append($op)
            }
        })
    }
</script>
</body>
</html>